<template>
  <div class="Wicket">
    <div class="title">欢迎登录</div>
    <div class="input_box">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item >
                <span slot="label" type="text" class="slot_form_label">用户名</span>
                 <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="活动名称">
                <span slot="label" class="slot_form_label">密码</span>
                <el-input type="password" v-model="form.password"></el-input>
            </el-form-item> 
        </el-form>

    </div>
    <div class="singUp">    
         <el-button type="primary" @click="login">登录</el-button>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                username:'',
                password:'',
            }
        }
    },
    components:{

    },
    watch:{

    },
    computed:{

    },
    created() {

    },
    mounted() {

    },
    methods: {
        login() {
            this.$router.push(`/index`)
        }
    }
}
</script>

<style lang="less" scoped>
.Wicket {
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 20px;
    .title {
       height: 80px;
       font-size: 24px;
       line-height: 80px;
       text-align: center;
       border-bottom: 1px solid rgba(0, 0, 0, 0.4);
    }
    .input_box {
      height: 140px;
      width: 80%;
      margin: 0 auto;
      margin-top: 20px;
    }
    .singUp {
      height: 80px;
      line-height: 80px;
      text-align: center;
      margin-top: -20px;
    }
}
::v-deep .el-form-item__label {
//   text-align: justify;
  text-align-last: justify;
  padding: 0 20 0 0;
  color: #333;
}
::v-deep .el-form-item__label::after {
  content: ": ";
  position: absolute;
}
.slot_form_label {
    color: black;
}
</style>